<template>
  <div :class="['calendar-card', type === 'day' ? 'calendar-day' : '']">
    <div class="header">
      <div class="desc">{{ title }}</div>
      <div class="date" v-if="type === 'month'">{{ year }}</div>
      <div class="date" v-if="type === 'day'">
        <el-date-picker
          v-model="date"
          type="month"
          size="small"
          :clearable="false"
          placeholder="选择月"
          value-format="yyyy-MM"
          @change="changeDate"
        />
      </div>
    </div>
    <div class="body">
      <div v-if="data.length > 0" class="calendar">
        <div v-for="item in data" :key="item.text" class="calendar-item-box" :style="`width:${colWidth}`">
          <div v-if="item.type !== 'chart'" class="calendar-item" :style="getHeight">
            <div class="summary">
              <div class="calendar-date">
                <span>{{ item.text }}</span>
                <span v-if="item.type === 'month'">月</span>
                <span v-else-if="item.type === 'day'">号</span>
                <span v-else-if="item.type === 'summary'">总计</span>
              </div>
              <div class="count">{{ item.count }}</div>
            </div>
            <!--月进度可以跳转-->
            <i v-if="type === 'month'" class="el-icon-d-arrow-right link" @click="clickHandle(item)"></i>
          </div>
          <div v-else>
            <el-progress
              type="circle"
              color="#e86452"
              :width="getChartWidth"
              :stroke-width="10"
              :format="format"
              stroke-linecap="butt"
              :percentage="item.count"
            ></el-progress>
          </div>
        </div>
      </div>
      <div class="no-data" v-else>暂无数据</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    year: {
      type: Number,
    },
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      validator: val => ['month', 'day'].includes(val),
      default: 'month',
    },
    defaultDate: {
      type: String,
      default: '',
    },
  },
  computed: {
    getHeight() {
      return this.type === 'day' ? `height:120px;` : 'height:100px;';
    },
    getChartWidth() {
      return this.type === 'day' ? 120 : 100;
    },
  },
  data() {
    return {
      colWidth: 0,
      date: '',
    };
  },
  created() {
    this.date = this.defaultDate;
    this.getColWidth();
  },
  methods: {
    getColWidth() {
      const colWidth = this.type === 'month' ? 5 : 7;
      this.colWidth = `${100 / colWidth}%`;
    },
    changeDate() {
      this.$emit('day', this.date);
    },
    clickHandle(val) {
      this.$emit('month', { year: this.year, month: val.text });
    },
    format(percentage) {
      return `完成${percentage}%`;
    },
  },
};
</script>

<style lang="scss" scoped>
$padding: 1%;
$borderBottom: 1px solid #0000000f;
.calendar-card {
  padding: 20px 15px;
  border: $borderBottom;
  border-radius: 3px;
  margin: 0 15px 15px 0;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #606266;
    font-size: 16px;
    padding: 0 calc(20px + 1%);
    border-bottom: $borderBottom;
    padding-bottom: 20px;
    margin: 0 -15px;
    .desc {
      position: relative;
    }
  }
  // 日期进度头部
  &.calendar-day {
    padding-top: 10px;
    .header {
      padding-bottom: 10px;
    }
  }
  .body {
    padding-top: 10px;
    .calendar {
      display: flex;
      flex-wrap: wrap;
      .calendar-item-box {
        padding: 10px $padding $padding $padding;
        .calendar-item {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 15px;
          padding: 20px 10px;
          background: #fff;
          text-align: center;
          border-radius: 3px;
          border: $borderBottom;
          // box-shadow: 0 2px 12px 0 #0000001a;
        }
        .calendar-date {
          color: #606266;
          padding-bottom: 10px;
        }
        .count {
          color: #e86452;
        }
        .summary {
          display: flex;
          flex-direction: column;
        }
        .link {
          padding-top: 3px;
          padding-left: 3px;
          transform: translateY(-14px);
          &:hover {
            color: #409eff;
            cursor: pointer;
          }
        }
        &:last-of-type {
          text-align: center;
        }
      }
    }
  }
  .no-data {
    text-align: center;
    line-height: 50px;
    font-size: 13px;
  }
}
</style>
